<script setup>

</script>

<template>
    <div class="background">
        <div class="background-filter-primary"></div>
        <div class="background-filter-secondary"></div>
        <div class="background-filter-tertiary"></div>
        <div class="background-filter-error"></div>
    </div>
</template>

<style scoped lang="scss">
.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: var(--md-sys-color-surface-container-highest);

    &-filter-primary, &-filter-secondary, &-filter-tertiary, &-filter-error {
        width: 60vw;
        height: 30vh;
        border-radius: 1000px;
        position: absolute;
        filter: blur(150px);
        transform: rotate(-5deg);
        opacity: 0.3;
    }

    &-filter-primary {
        top: 35%;
        left: 0%;
        background-color: var(--md-sys-color-primary-fixed);
    }

    &-filter-secondary {
        left: 10%;
        background-color: var(--md-sys-color-secondary-fixed);
    }

    &-filter-tertiary {
        bottom: 10%;
        right: 0;
        filter: blur(300px);
        transform: rotate(-25deg);
        background-color: var(--md-sys-color-tertiary-fixed);
    }

    &-filter-error {
        bottom: 0;
        right: 0;
        filter: blur(200px);
        transform: rotate(-10deg);
        background-color: var(--md-sys-color-error);
    }
}
</style>
